<template>
	<div class="app-container">

		<el-tabs v-model="data.activeName" class="demo-tabs">
			<el-tab-pane :label="$t('machine.addMachine.basic')" name="Basic" />
			<el-tab-pane :label="$t('machine.addMachine.senior')" name="senior" />
			<el-tab-pane :label="$t('machine.addMachine.config')" name="config" />
		</el-tabs>

		<el-form :model="data.info" :inline="true" class="w-full" label-width="150">

			<div v-if="data.activeName == 'Basic'" class="mt-2">

				<el-form-item :label="$t('machine.code') + ':'" prop="machine_id" class="w-2/4">
					<el-input v-model="data.info.machine_id" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.name') + ':'" prop="machine_name" class="w-2/4">
					<el-input v-model="data.info.machine_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				
				<el-form-item :label="$t('machine.appType')+':'" prop="device_type" class="w-2/4">
					<el-select v-model="data.info.device_type" :placeholder="$t('message.pleaseSelect')" clearable filterable>
						<el-option :label="$t('machine.vending')" :value="1" />
						<el-option :label="$t('machine.store')" :value="2" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('machine.level')+':'" prop="machine_level" class="w-2/4">
					<el-select v-model="data.info.machine_level" :placeholder="$t('message.pleaseSelect')" clearable filterable>
						<el-option :label="$t('machine.StarterEdition')" :value="1" />
						<el-option :label="$t('machine.DeluxeEdition')" :value="2" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.pic') + ':'" prop="pic" class="w-2/4">

					<el-select v-model="data.info.pic" :placeholder="$t('message.pleaseSelect')" clearable filterable
						style="width: 94%;">
						<el-option v-for="item of data.imgarr" :key="item.res_id"
							:label="item.res_id + '-' + item.title" :value="item.file_path" />
					</el-select>
					<el-icon style="width: 6%;" size="20" @click="urlimg(data.info.pic)">
						<Picture />
					</el-icon>
				</el-form-item>

				<el-form-item label="LOGO:" prop="logo" class="w-2/4">
					<el-select v-model="data.info.logo" :placeholder="$t('message.pleaseSelect')" clearable filterable
						style="width: 94%;">
						<el-option v-for="item of data.imgarr" :key="item.res_id"
							:label="item.res_id + '-' + item.title" :value="item.file_path" />
					</el-select>
					<el-icon style="width: 6%;" size="20" @click="urlimg(data.info.logo)">
						<Picture />
					</el-icon>
				</el-form-item>

				<el-form-item :label="$t('machine.group') + ':'" prop="machine_group_id" class="w-2/4">
					<el-cascader :placeholder="$t('message.pleaseSelect')" class="w-full" clearable :props="propss" v-model="data.info.machine_group_id" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.organization') + ':'" prop="ao_id" class="w-2/4"
					v-prmis="'auth_organization_getList'">
					<el-cascader v-model="data.info.ao_id" :props="organinfo" class="w-full" clearable
						:placeholder="$t('message.pleaseSelect')" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.admin') + ':'" prop="manager_id" class="w-2/4"
					v-prmis="'auth_manager_getList'">
					<el-select v-model="data.info.manager_id" :placeholder="$t('message.pleaseSelect')" clearable
						filterable>
						<el-option v-for="item of data.manager" :key="item.manager_id"
							:label="item.manager_id + '-' + item.nickname" :value="item.manager_id" />
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('machine.addMachine.mac') + ':'" prop="mac_address" class="w-2/4">
					<el-input v-model="data.info.mac_address" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

			</div>

			<div v-if="data.activeName == 'senior'" class="mt-2">

				<el-form-item :label="$t('machine.addMachine.num') + ':'" prop="machine_serial_number" class="w-2/4">
					<el-input v-model="data.info.machine_serial_number" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.lang') + ':'" prop="lang" class="w-2/4" v-prmis="'config_lang_getList'">
					<el-select v-model="data.info.lang" :placeholder="$t('message.pleaseSelect')" clearable filterable>
						<el-option v-for="item of data.language" :key="item.l_id" :label="item.l_id + '-' + item.name"
							:value="item.lang" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('machine.currencySymbol') + ':'" prop="currency" class="w-2/4">
					<el-input v-model="data.info.currency" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.pass') + ':'" prop="restore_code" class="w-2/4">
					<el-input v-model="data.info.restore_code" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.inv') + ':'" prop="recycle_bin_capacity" class="w-2/4">
					<el-input v-model="data.info.recycle_bin_capacity" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.config') + ':'" prop="config_id" class="w-2/4" v-prmis="'achine_config_achine_config'">
					<el-select v-model="data.info.config_id" :placeholder="$t('message.pleaseSelect')" clearable filterable multiple>
						<el-option v-for="item of data.config" :key="item.mc_id"
							:label="item.mc_id + '-' + item.mc_title" :value="item.mc_id" />
					</el-select>
				</el-form-item>

			</div>

			<div v-if="data.activeName == 'config'" class="mt-2">

				<el-form-item :label="$t('machine.addMachine.location') + ':'" prop="country" class="w-2/4">
					<el-cascader v-model="data.info.country" :props="propsinfo" class="w-full" clearable
						:placeholder="$t('message.pleaseSelect')" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.detailsAddress') + ':'" prop="street" class="w-2/4">
					<el-input v-model="data.info.street" :placeholder="$t('message.pleaseEnter')" maxlength="11" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.floor') + ':'" prop="floor" class="w-2/4">
					<el-input v-model="data.info.floor" :placeholder="$t('message.pleaseEnter')" maxlength="11" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.factory') + ':'" prop="floor" class="w-2/4">
					<el-input v-model="data.info.factory" :placeholder="$t('message.pleaseEnter')" maxlength="11" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.inventory_location') + ':'" prop="floor" class="w-2/4">
					<el-input v-model="data.info.inventory_location" :placeholder="$t('message.pleaseEnter')" maxlength="11" />
				</el-form-item>


				<el-form-item :label="$t('machine.addMachine.postal') + ':'" prop="zip_code" class="w-2/4">
					<el-input v-model="data.info.zip_code" :placeholder="$t('message.pleaseEnter')" maxlength="11" />
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.scene') + ':'" prop="scene_id" class="w-2/4"
					v-prmis="'config_scene_getList'">
					<el-select v-model="data.info.scene_id" :placeholder="$t('message.pleaseSelect')" clearable
						filterable>
						<el-option v-for="item of data.scene" :key="item.id" :label="item.id + '-' + item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('machine.addMachine.desc') + ':'" prop="desc" class="w-3/4">
					<Editor v-model="data.info.desc" />
				</el-form-item>

			</div>

			<div class="w-2/4 text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>



		<el-dialog v-model="data.demonstrate" :title="$t('machine.addMachine.material')" center width="30%">
			<div class="flex justify-center">
				<el-image class="max-w-80" :src="data.file_path" fit="fill" />
			</div>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getresourceList } from '@/api/advment';
import { getlang, getscene } from '@/api/manage';
import { getconfigList, addmachine } from '@/api/machine';
import { getgroupList } from '@/api/machine_type';
import { getmanagerList } from '@/api/manager';
import Editor from '@/components/Editor/index.vue';
import arrange from '@/utils/hierarchy';
import { getlist } from '@/utils/earth';
import { useRouter } from "vue-router";
import store from '@/store'
const router = useRouter()
let data = reactive({
	demonstrate: false, // 素材弹窗
	activeName: 'Basic', // 标签页
	info: { // 添加的设备信息
		mac_address: '',
		machine_id: '',
		machine_name: '',
		machine_serial_number: '',
		recycle_bin_capacity: '',
		pic: '',
		logo: '',
		lang: '',
		currency: '',
		restore_code: '',
		desc: '',
		zip_code: '',
		street: '',
		floor: '',
		scene_id: '',
		status: 1,
		ao_id: '',
		manager_id: '',
		factory: '',
		inventory_location: '',
		config_id: '',
		machine_group_id: [],
		device_type: 1,
		machine_level: null
	},
	rules: {
		// 表单验证
		machine_id: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' }
	},
	imgarr: [], // 设备图片信息
	language: [], // 设备语言
	scene: [], // 设备场景
	config: [], // 配置信息
	manager: [], // 管理员
	mactype: [], // 设备分组
	file_path: '', // 素材地址
})
const propss = reactive(
	{
		checkStrictly: true,
		lazy: true,
		multiple: true,
		async lazyLoad(node:any, resolve:any) {
			const { level, value } = node
			let nodes = await getgroupList({pid:value});
			if (nodes.state == 100 || nodes.state == 300) {
				resolve([]);
			}
			const nodesa = nodes.data.map((item) => ({
				value: item.mg_id,
				label: item.mg_id + '-' + item.mg_name
			}))
			resolve(nodesa);
		}
	}
)
// 获取列表信息
let getobjlist = () => {
	data.imgarr = []
	// 素材列表
	getresourceList({ type: 1 }).then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				if (item.status == 1) {
					data.imgarr.push(item)
				}
			}
		}
	})

	// 语言列表
	getlang().then(res => {
		if (res.state == 200) {
			data.language = res.data
		}
	})

	// 设备场景
	getscene().then(res => {
		if (res.state == 200) {
			data.scene = res.data
		}
	})
	let arrUrl:any = []
	store.state.menu.forEach(item => {
		arrUrl.push(item.url)
	});
	// 设备配置信息
	let isConfigData = arrUrl.includes('/management/machine.machine_config/achine_config')
	if(isConfigData){
		getconfigList({}).then(res => {
			if (res.state == 200) {
				data.config = res.data
			}
		})
	}


	// 管理员列表
	getmanagerList().then(res => {
		if (res.state == 200) {
			data.manager = res.data
		}
	})

	// 设备分组
	getgroupList().then(res => {
		if (res.state == 200) {
			data.mactype = res.data
		}
	})

}

// 查看素材
let urlimg = (e) => {
	if (e == '') {
		return;
	}
	data.demonstrate = true;
	data.file_path = e;
}

// 地理位置
let propsinfo = reactive({
	lazy: true,
	multiple: false,
	emitPath: true,
	checkStrictly: true,
	async lazyLoad(node, resolve) {
		const { level, value } = node
		let nodes = await getlist(value, level + 2);
		if (nodes.state == 100 || nodes.state == 300) {
			resolve([]);
		}
		resolve(nodes);
	}
});

// 管理组织
let organinfo = reactive({
	lazy: true,
	multiple: false,
	checkStrictly: true,
	async lazyLoad(node, resolve) {
		let nodes = await arrange.arrange(2, node.data.value);
		resolve(nodes);
	}
});

// 提交数据
let submit = () => {
	let obj = {}
	if (data.info.machine_id == '') {
		ElMessage({
			message: $t('message.pleaseEnterMachineCode'),
			type: 'error'
		})
		return
	}
	for (let key in data.info) {
		if (key != 'machine_group_id') {
			obj[key] = data.info[key]
		}
	}
	let machine_group_id_list:any = []
	data.info.machine_group_id.forEach(ite=>{
		machine_group_id_list.push(ite[ite.length-1])
	})
	obj.machine_group_id = machine_group_id_list.join(',')
	if (obj.country && obj.country.length) {
		obj.country_id = obj.country[0] || ''
		obj.state_id = obj.country[1] || ''
		obj.city_id = obj.country[2] || ''
		obj.regions_id = obj.country[3] || ''
	}
	addmachine(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.addSuccess'),
				type: 'success'
			})
			router.back()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 取消
let cancell = () => {
	for (let key in data.info) {
		data.info[key] = ''
	}
	router.back()
}

getobjlist()

</script>
